<template>
	
	<view>
		<!--fixed -->
		<view class="top--fixed" v-if="showFixed">
			<view v-if="lineRight" class="tui-cell-ico" @tap="handleClick">
				<uni-icons type="arrowleft" size="40" color="#999"></uni-icons>
			</view>
			<view class="tui-rolling-search">
				<!-- #ifdef APP-PLUS || MP -->
				<uni-icons type="search" size="26" color="#999"></uni-icons>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view><uni-icons type="search" size="36" color="#999"></uni-icons></view>
				<!-- #endif -->
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item, index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
						<view class="tui-hot-item">{{ item }}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="tui-category-scale" @click="scanCode()">
				<uni-icons type="scan" size="48" color="#999"></uni-icons>
			</view>
		</view>
		
		<!-- 顶部面板 -->
		<view class="top--panel" v-else>
			<!-- <view class="tui-cell-ico" @tap="hrefTop">
				<image src="../../static/icon/urgent.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
			</view> -->
			<view class="tui-rolling-search">
				<!-- #ifdef APP-PLUS || MP -->
				<uni-icons type="search" size="26" color="#999"></uni-icons>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view><uni-icons type="search" size="36" color="#999"></uni-icons></view>
				<!-- #endif -->
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item, index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
						<view class="tui-hot-item">{{ item }}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	
	export default {
		components: {
			uniIcons
		},
		props:{
			hotSearch: {
				type: Array,
				default: []
			},
			lineRight: {
				type: Boolean,
				default: false
			},
			showFixed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods:{
			search: function() {
				uni.navigateTo({
					url: '/pagesB/search/search'
				});
			},
			hrefTop: function() {
				uni.navigateTo({
					url: '/pagesM/urgent/urgent'
				});
			},
			handleClick() {
				uni.navigateBack(1)
			},
			//扫码功能
			scanCode() {
                this.$api.msg('点击扫码')
			}
		}
	}
</script>

<style lang="scss">
	.top--fixed {
		position: fixed;
		display: flex;
		z-index: 99;
		width: 95%;
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.top--panel{
		padding: 20rpx;
		display: flex;
	}
	.tui-rolling-search {
		width: 100%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}
	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}
	.tui-swiper-item {
		display: flex;
		align-items: center;
	}
	.tui-category-scale {
		padding-left: 20rpx;
	}
	.tui-cell-ico {
		padding-right: 15rpx;
	}
</style>
